<template>
  <div class="data-source-box">
    <el-dialog
      title="数据源"
      :visible.sync="dataSourceVisible"
      width="30%"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <ul class="data-source-type">
        <li
          v-for="dataSourceType in dataSourceTypeList"
          :key="dataSourceType.name"
          :class="{'active': activeName == dataSourceType.name}"
          @click="activeName = dataSourceType.name"
        >
          <img :src="dataSourceType.img" />
          <span>{{dataSourceType.name}}</span>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDataSourceVisible(false)">取 消</el-button>
        <el-button type="primary" @click="chooseDataSourceType()">确 定</el-button>
      </span>
    </el-dialog>

    <excel-upload-box
      :excelUploadBoxVisible="excelUploadBoxVisible"
      v-on:set-excel-upload-box-visible="setExcelUploadBoxVisible"
    ></excel-upload-box>

    <postgres-sql
      :postgresSqlBoxVisible="postgresSqlBoxVisible"
      v-on:set-postgres-sql-box-visible="setPostgresSqlBoxVisible"
    ></postgres-sql>

    <csv-upload-box :csvBoxVisible="csvBoxVisible" v-on:set-csv-box-visible="setCsvBoxVisible"></csv-upload-box>
  </div>
</template>

<script>
import ExcelUploadBox from "@/components/ExcelUploadBox.vue";
import PostgresSql from "@/components/PostgresSql.vue";
import CsvUploadBox from "@/components/CsvUploadBox";
export default {
  props: ["dataSourceVisible"],
  components: {
    ExcelUploadBox,
    PostgresSql,
    CsvUploadBox,
  },
  data() {
    return {
      excelUploadBoxVisible: false,
      csvBoxVisible: false,
      postgresSqlBoxVisible: false,
      activeName: "",
      dataSourceTypeList: [
        {
          name: "Excel",
          img: require("@/assets/image/head/excel.png"),
        },
        {
          name: "Csv",
          img: require("@/assets/image/head/csv.png"),
        },
        {
          name: "PostgreSQL",
          img: require("@/assets/image/head/数据库.png"),
        },
      ],
    };
  },
  methods: {
    chooseDataSourceType() {
      if (this.activeName == "") {
        this.$message.error("请选择数据源");
        return;
      }

      this.setDataSourceVisible(false)
      let name = this.activeName

      if (name == "Excel") {
        this.excelUploadBoxVisible = true;
      } else if (name == "Csv") {
        this.csvBoxVisible = true;
      } else if (name == "PostgreSQL") {
        this.postgresSqlBoxVisible = true;
      }
    },

    setDataSourceVisible(val) {
      this.$emit("set-data-source-visible", val);
    },
    setPostgresSqlBoxVisible(val) {
      this.postgresSqlBoxVisible = val;
    },
    setExcelUploadBoxVisible(val) {
      this.excelUploadBoxVisible = val;
    },
    setCsvBoxVisible(val) {
      this.csvBoxVisible = val;
    },
  },
};
</script>

<style scoped>
.active {
  background-color: rgb(200, 200, 200);
}

.data-source-type {
  list-style-type: none;
}

.data-source-type li {
  display: flex;
  align-content: center;

  font-size: 18px;
  padding: 10px;
  margin-bottom: 15px;

  user-select: none;
}

.data-source-type li:hover {
  background-color: rgb(200, 200, 200);
}

.data-source-type li img {
  width: 25px;
  height: 25px;

  margin-right: 10px;
}
</style>